<template>
  <div
    class="main-content"
    style="margin-top: 40px">
    <el-row
      :gutter="24"
      type="flex"
      align="middle">
      <el-col :span="8">
        <top-left/>
      </el-col>
      <el-col :span="16">
        <total-device-info style="overflow: hidden"/>
      </el-col>
    </el-row>
    <dv-decoration-10 style="width:100%;height:5px;margin:10px 0" />
    <el-row
      :gutter="24"
      type="flex"
      align="middle">
      <el-col :span="8">
        <bottom-left/>
      </el-col>
      <el-col :span="16">
        <app-active style="overflow: hidden"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import topHeader from './dataV/components/topHeader'
import appActive from './data-show/components/app-active'
import totalDeviceInfo from './data-show/components/total-device-info'
import topLeft from './data-show/components/topLeft'
import bottomLeft from './data-show/components/bottomLeft'

export default {
  components:
  {
    topHeader,
    appActive,
    totalDeviceInfo,
    topLeft,
    bottomLeft
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="less">

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }

  .carousel-item{
    height: 800px;
    background-color: transparent;
  }

  .scroll-board{
    width: 210px;
    position: absolute;
    right: 12px;
    top:0;
  }
</style>
